<template>
  <div class="diaLogBox2" v-show="isShow">
    <span class="close" @click="close">
      <i class="el-icon-close"></i>
    </span>
    <h2>设备列表</h2>
    <!-- 视频设备 -->
    <template v-if="tag === 'video'">
      <el-table
        :data="listData"
        height="96%"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="deviceName" align="center" label="设备名称" width="120">
        </el-table-column>
        <el-table-column prop="url" align="center" label="视频地址" width="200">
        </el-table-column>

        <!-- <el-table-column prop="location" label="安装位置"> </el-table-column> -->
    

        <el-table-column prop="location" label="安装位置"> </el-table-column>
        <el-table-column align="center" label="操作" width="200">

          <template slot-scope="scope">
            <div class="flex-g">
           <el-button
              @click="editEquip(scope.row)"
              size="mini"
              type="success"
              >编辑</el-button>
            <el-button
              @click="handleClick(scope.row.id)"
              size="mini"
              type="danger"
              >删除</el-button>
            </div>
           
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 电话设备 -->
    <template v-else-if="tag === 'phone'">
      <el-table
        :data="listData"
        height="97%"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="设备名称" width="140">
        </el-table-column>
        <el-table-column prop="no" label="设备编号" width="120">
        </el-table-column>
        <el-table-column prop="location" label="安装位置"> </el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="editEquip(scope.row)"
              size="mini"
              type="success"
              >编辑</el-button>
            <el-button
              @click="handleClick(scope.row.id)"
              type="danger"
              size="small"
              >删除</el-button 
            > 
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- wifi设备 -->
    <template v-else-if="tag === 'wifi'">
      <el-table
        :data="listData"
        height="96%"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
     
        <el-table-column prop="name" label="设备名称" width="180">
        </el-table-column>
        <el-table-column prop="no" label="设备编号" width="160">
        </el-table-column>
        <el-table-column prop="deviceName" label="安装位置"> </el-table-column>  

        <el-table-column label="操作" width="200">

          <template slot-scope="scope">
            <el-button
              @click="editEquip(scope.row)"
              size="mini"
              type="success"
              >编辑</el-button>
            <el-button
              @click="handleClick(scope.row.id)"
              type="danger"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
// import { equipmentDelete, ezvizDeviceDelete } from "@/api/api";


export default {
  props: {
    tag: {
      type: String,
      default: "",
    },
    isShow: {
      type: Boolean, 
      default: false,
    },
    listData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
    };
  },

  methods: {
    close() {
      this.$emit("dialogShow", false);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleClick(id) {
      console.log(this.tag);
      if (this.tag === "video") {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            ezvizDeviceDelete(id).then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
          
              this.$emit("getData");
            });
          })
          .catch(() => {
            this.$message.error("删除失败");
          });
      } else if(this.tag === 'wifi' || this.tag === 'phone') {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            equipmentDelete(id).then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
           
              this.$emit("getData");
            });
          })
          .catch(() => {
            this.$message.error("删除失败");
          });
      }
    },
    editEquip(data){
      this.$emit('editData',data);
      this.$emit("dialogShow", false);
    }
  },
};
</script>

<style lang="scss" scoped>
.diaLogBox2 {
  position: fixed;
  border-left: 1px solid #ccc;
  padding: 40px 20px;
  width: 700px;
  height: 96vh;
  overflow-y: scroll;
  top: 0;
  right: 0;
  background-color: #fff;
  .close {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
